<template>
    <div class="card-border flex-direction-column warn-msg-card">
        <ul class="warn-msg-wrap">
            <li class="item" v-for="(warn, i) in warnList" :key="i">
                <template v-if="warn.msgType===WARN_MSG_TYPE_UN_SAFETY_HAT">
                    <div class="msg">
                        <!-- <SvgIcon icon-class="hat_icon" /> -->
                        {{ $t('工件未刷油') }}
                    </div>
                    <span>
                        {{ prop.HelmetNum }} {{ $t('次') }}/{{ $t('天') }}
                    </span>
                </template> 
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import {
    WARN_MSG_TYPE_PICTURE,
    WARN_MSG_TYPE_UN_SAFETY_HAT
} from '@/utils/constants'
import { T_WarnMsg_List_Item } from '@/pages/event-warn/types.ts'

interface T_Prop {
    HelmetNum: number;
    PhoneNum: number;
}

const prop = defineProps<T_Prop>()

const warnList = ref<T_WarnMsg_List_Item[]>([])

function getWarnList(): void {
    warnList.value = new Array(2).fill(0).map((item, i) => {
        return {
            msgType: i+1,
            content: '',
            everydayNum: (item+1)*10,
        }
    })
}
getWarnList()
</script>
<style lang="scss">
.warn-msg-card {
    flex: 1;
    justify-content: center;
}
.warn-msg-wrap {
    margin: 20px 5px;
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 13px;
        color: #CADCFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.696px; /* 123.48% */
        // border: 1px solid transparent;
        // border-image: linear-gradient(90deg,hsla(234, 98%, 23%, 1),transparent);
        // border-image-slice: 1;
        .msg {
            display: flex;
            align-items: center;
            gap: 6px;
            .svg-icon {
                width: 1.2rem;
                height: 2.1rem;
            }
        }
    }
}
@media screen and (max-width: 1700px) {
    .warn-msg-wrap {
        .item {
            font-size: 20px;
        }
    }
}
</style>